<script setup lang="ts">
import { ref } from 'vue';

const carouselData = ref([
  {
    image: 'https://source.unsplash.com/1920x600/?coding,technology',
    title: '探索编程的无限可能',
    description: '在这里，开启你的编程之旅，挑战自我，突破极限。'
  },
  {
    image: 'https://source.unsplash.com/1920x600/?algorithm,data',
    title: '算法的艺术殿堂',
    description: '深入算法的奥秘，体验解决问题的乐趣。'
  },
  {
    image: 'https://source.unsplash.com/1920x600/?competition,success',
    title: '竞技场上的荣耀',
    description: '参与激烈的编程竞赛，与高手同台竞技。'
  }
]);

// 功能模块数据
const featureData = ref([
  {
    icon: 'https://cdn-icons-png.flaticon.com/512/2721/2721629.png',
    title: '智能题库',
    description: '根据你的水平智能推荐题目，助你循序渐进提升实力。'
  },
  {
    icon: 'https://cdn-icons-png.flaticon.com/512/2920/2920277.png',
    title: '实时竞赛',
    description: '丰富多样的比赛形式，实时排名，即时反馈。'
  },
  {
    icon: 'https://cdn-icons-png.flaticon.com/512/3051/3051639.png',
    title: '社区互动',
    description: '分享解题思路，讨论技术难点，结识志同道合的伙伴。'
  }
]);

// 热门内容数据
const hotContentData = ref([
  {
    title: '每周精选题目',
    content: '精心挑选的高质量题目，助你掌握核心算法思想。',
    link: '/problem'
  },
  {
    title: '大型赛事预告',
    content: '重量级编程竞赛即将开启，丰厚奖励等你来战！',
    link: '/contest'
  },
  {
    title: '技术专栏',
    content: '业内专家分享前沿技术和经验，助你把握技术脉搏。',
    link: '/blog'
  }
]);

// 热门博客数据
const hotBlogs = ref([
  {
    title: '算法训练攻略',
    content: '系统化的算法学习方法，助你快速提升编程实力。',
    link: '/blog/1'
  },
  {
    title: '竞赛技巧分享',
    content: '资深选手分享比赛经验，教你如何在竞赛中脱颖而出。',
    link: '/blog/2'
  },
  {
    title: '编程进阶之路',
    content: '从入门到精通，一步步带你成为编程高手。',
    link: '/blog/3'
  }
]);

// 热门挑战题目数据
const hotProblems = ref([
  {
    title: '动态规划精选',
    content: '一系列精心设计的动态规划问题，助你掌握这一重要算法思想。',
    link: '/problem/1001'
  },
  {
    title: '图论专题挑战',
    content: '深入理解图论算法，解决复杂的网络问题。',
    link: '/problem/1002'
  },
  {
    title: '高级数据结构',
    content: '掌握高级数据结构，提升代码效率与优雅度。',
    link: '/problem/1003'
  }
]);
</script>

<template>
  <div class="home-container">
    <a-carousel class="carousel" autoplay>
      <template #customPrevArrow>
        <a-icon type="left" />
      </template>
      <template #customNextArrow>
        <a-icon type="right" />
      </template>
      <div v-for="(item, index) in carouselData" :key="index">
        <div class="carousel-item">
          <!-- <img :src="item.image" alt="Carousel Slide"> -->
          <div class="carousel-text">
            <h2>{{ item.title }}</h2>
            <p>{{ item.description }}</p>
          </div>
        </div>
      </div>
    </a-carousel>

    <div class="feature-section">
      <h2 class="section-title">平台功能</h2>
      <a-row :gutter="24">
        <a-col :span="8" v-for="(item, index) in featureData" :key="index">
          <div class="feature-item">
            <img :src="item.icon" alt="Feature Icon">
            <h3>{{ item.title }}</h3>
            <p>{{ item.description }}</p>
          </div>
        </a-col>
      </a-row>
    </div>

    <div class="hot-content-section">
      <h2 class="section-title">热门内容数据</h2>
      <a-row :gutter="24">
        <a-col :span="8" v-for="(item, index) in hotContentData" :key="index">
          <div class="hot-content-item">
            <h3><a :href="item.link">{{ item.title }}</a></h3>
            <p>{{ item.content }}</p>
          </div>
        </a-col>
      </a-row>
    </div>

    <!-- 热门挑战题目 -->
    <div class="hot-content-section">
      <h2 class="section-title">热门挑战题目</h2>
      <a-row :gutter="24">
        <a-col :span="8" v-for="(item, index) in hotProblems" :key="index">
          <div class="hot-content-item">
            <h3><a :href="item.link">{{ item.title }}</a></h3>
            <p>{{ item.content }}</p>
          </div>
        </a-col>
      </a-row>
    </div>

    <!-- 热门博客 -->
    <div class="hot-content-section">
      <h2 class="section-title">热门博客</h2>
      <a-row :gutter="24">
        <a-col :span="8" v-for="(item, index) in hotBlogs" :key="index">
          <div class="hot-content-item">
            <h3><a :href="item.link">{{ item.title }}</a></h3>
            <p>{{ item.content }}</p>
          </div>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<style scoped>
.home-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  background-color: #fff;
  padding: 24px 8px 40px 8px;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}


@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.carousel {
  height: 400px;
  margin-bottom: 48px;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 12px 36px rgba(0,0,0,0.12);
  position: relative;
  z-index: 1;
}

.carousel-item {
  position: relative;
  height: 400px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.carousel-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(45deg, #2d6cdf 0%, #1a3e7a 100%);
  opacity: 0.85;
  z-index: 0;
  animation: gradientMove 8s ease infinite;
}

@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.carousel-text {
  position: relative;
  z-index: 1;
  text-align: center;
  color: #fff;
  background: rgba(255,255,255,0.1);
  padding: 40px 32px;
  border-radius: 20px;
  backdrop-filter: blur(12px);
  max-width: 700px;
  margin: 0 auto;
  transform: translateY(0);
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

.carousel-text h2 {
  font-size: 2.8rem;
  font-weight: 800;
  margin-bottom: 16px;
  letter-spacing: 2px;
  background: linear-gradient(to right, #fff, #e0e7ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.carousel-text p {
  font-size: 1.3rem;
  opacity: 0.95;
  line-height: 1.6;
  text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.section-title {
  font-size: 2rem;
  text-align: center;
  margin-bottom: 36px;
  font-weight: 800;
  color: #1a1a1a;
  letter-spacing: 1.5px;
  position: relative;
  display: inline-block;
  left: 50%;
  transform: translateX(-50%);
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(to right, #2d6cdf, #1a3e7a);
  border-radius: 2px;
}

.feature-section {
  margin-bottom: 64px;
  position: relative;
  z-index: 1;
}

.feature-item {
  text-align: center;
  padding: 40px 24px 32px 24px;
  border-radius: 24px;
  background: rgba(255,255,255,0.9);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
}

.feature-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.4s ease;
}


.feature-item img {
  width: 80px;
  height: 80px;
  margin-bottom: 20px;
  border-radius: 50%;
  background: #f8faff;
}

.feature-item h3 {
  font-size: 1.4rem;
  margin-bottom: 12px;
  font-weight: 700;
  color: #2d6cdf;
  transition: color 0.3s ease;
}

.feature-item:hover h3 {
  color: #1a3e7a;
}

.feature-item p {
  font-size: 1.1rem;
  color: #444;
  line-height: 1.6;
}

.hot-content-section {
  margin-bottom: 64px;
  position: relative;
  z-index: 1;
}

.hot-content-item {
  padding: 32px 24px 24px 24px;
  border-radius: 24px;
  background: rgba(255,255,255,0.9);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  margin-bottom: 24px;
  min-height: 160px;
  position: relative;
  overflow: hidden;
}

.hot-content-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(to right, #2d6cdf, #1a3e7a);
  transform: scaleX(0);
  transition: transform 0.4s ease;
}

.hot-content-item h3 {
  font-size: 1.3rem;
  margin-bottom: 14px;
  font-weight: 700;
}

.hot-content-item h3 a {
  color: #2d6cdf;
  text-decoration: none;
  transition: all 0.3s ease;
  position: relative;
}

.hot-content-item h3 a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background: #2d6cdf;
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.hot-content-item h3 a:hover {
  color: #1a3e7a;
}

.hot-content-item h3 a:hover::after {
  transform: scaleX(1);
}

.hot-content-item p {
  font-size: 1.1rem;
  color: #444;
  opacity: 0.96;
  line-height: 1.6;
}

/* 响应式适配 */
@media (max-width: 900px) {
  .carousel, .carousel-item { height: 300px; }
  .carousel-text { 
    padding: 24px 16px;
    max-width: 90%;
  }
  .carousel-text h2 { font-size: 2rem; }
  .carousel-text p { font-size: 1.1rem; }
  .feature-item, .hot-content-item { padding: 24px 16px; }
}

@media (max-width: 600px) {
  .home-container { padding: 16px 8px; }
  .carousel, .carousel-item { height: 200px; }
  .carousel-text h2 { font-size: 1.5rem; }
  .carousel-text p { font-size: 1rem; }
  .section-title { font-size: 1.5rem; }
  .feature-item h3, .hot-content-item h3 { font-size: 1.2rem; }
  .feature-item p, .hot-content-item p { font-size: 1rem; }
}
</style>
